<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            background-color: #f8f9fa;
        }
        .container {
            margin-top: 50px;
        }
        .table thead th {
            background-color: #007bff;
            color: white;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
        .btn-success {
            background-color: #28a745;
            border-color: #28a745;
        }
        .btn-success:hover {
            background-color: #218838;
            border-color: #218838;
        }
        .btn-warning {
            color: white;
        }
        .btn-warning:hover {
            background-color: #e0a800;
        }
        .btn-danger {
            background-color: #dc3545;
        }
        .btn-danger:hover {
            background-color: #c82333;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2 class="text-center flex-grow-1" style="text-align: center;">用户管理</h2>
        <a href="{% url 'add_user' %}" class="btn btn-success ms-3" style="white-space: nowrap;">新增用户</a>
    </div>


    <!-- 搜索框 -->
    <form method="GET" action="{% url 'user_management' %}" class="mb-4 d-flex">
        <div class="input-group" style="flex-grow: 1;">
            <input type="text" name="search" class="form-control" placeholder="搜索用户名或邮箱" value="{{ search_query }}" style="border-radius: 20px 0 0 20px;">
            <button class="btn btn-primary" type="submit" style="border-radius: 0 20px 20px 0;">搜索</button>
        </div>
        {% if search_query %}
            <a href="{% url 'user_management' %}" class="btn btn-secondary ms-2" style="border-radius: 20px; background-color: #d9534f; border: none;">取消搜索</a>
        {% endif %}
    </form>


    <!-- 用户列表 -->
    <div class="table-responsive">
        <table class="table table-striped table-hover table-bordered align-middle">
            <thead>
            <tr>
                <th>#</th>
                <th>用户名</th>
                <th>邮箱</th>
                <th>角色</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {% for user in users %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ user.username }}</td>
                    <td>{{ user.email }}</td>
                    <td>
                        {% if user.role == "admin" %}
                            管理员 (Admin)
                        {% elif user.role == "user" %}
                            普通用户 (User)
                        {% elif user.role == "auditor" %}
                            审计员 (Auditor)
                        {% endif %}
                    </td>
                    <td>
                        <div class="d-flex gap-2">
                            {% if user.role == "auditor" %}
                                <a href="javascript:void(0);" class="btn btn-warning btn-sm disabled">不可修改</a>
                            {% else %}
                                <a href="{% url 'edit_user' user.id %}" class="btn btn-warning btn-sm">修改角色</a>
                            {% endif %}
                            <a href="{% url 'delete_user' user.id %}" class="btn btn-danger btn-sm" onclick="return confirm('确定要删除此用户吗？');">删除</a>
                        </div>
                    </td>
                </tr>
            {% empty %}
                <tr>
                    <td colspan="5" class="text-center text-muted">没有找到用户</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="mt-3 text-center">
        <!-- 返回主界面按钮 -->
        <a href="{% url 'index' %}" class="btn btn-secondary mx-2">返回首页</a>
    </div>

</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

